<template>
  <div class="login-container">
    <el-form
      ref="ruleFormRef"
      :model="loginForm"
      :rules="rules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">
          <img src="@/assets/common/login-logo.png" alt="" />
        </h3>
      </div>
      <el-form-item prop="mobile">
        <span class="svg-container">
          <svg-icon name="user" />
        </span>
        <el-input
          ref="mobile"
          v-model="loginForm.mobile"
          placeholder="请输入手机号"
          name="mobile"
          type="text"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password" class="possword">
        <svg-icon name="password"></svg-icon>
        <el-input
          :key="passwordType"
          ref="refPassword"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          auto-complete="on"
          @keyup.enter="handleLogin(ruleFormRef)"
        />
        <label @click="showPwd">
          <svg-icon v-if="passwordType" name="eye" />
          <svg-icon v-else name="eye-open" />
        </label>
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width: 430px; margin-bottom: 30px; height: 50px"
        class="loginBtn"
        @click.prevent="handleLogin(ruleFormRef)"
      >
        登录
      </el-button>
      <div class="tips">
        <span style="margin-right: 20px">账号: 13800000002</span>
        <span> 密码: 123456</span>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'
import { validMobile } from '@/utils/vaildate'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useStore } from '@/store/user'
import router from '@/router'
//绑定from组件实例
const ruleFormRef = ref<FormInstance>()
//表单验证数据
const loginForm = reactive({
  mobile: '13800000002',
  password: '123456',
})
//自定义验证函数
const checkMobile = (rule: any, value: string, callback: any) => {
  if (!validMobile(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}
//表单验证规则
const rules = reactive<FormRules>({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: checkMobile, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '密码的长度为6-15位', trigger: 'blur' },
  ],
})
//控制数据加载
const loading = ref(false)
//控制眼睛的闭合
const passwordType = ref('password')
const refPassword = ref<HTMLInputElement>()
const showPwd = () => {
  // if(passwordType.value!=='password') return passwordType.value='password'
  // passwordType.value=''
  passwordType.value === 'password' ? (passwordType.value = '') : (passwordType.value = 'password')
  nextTick(() => {
    refPassword.value?.focus()
  })
}
//兜底验证
const store = useStore()
//获取路由
const route = useRoute()
console.log('路由', route.fullPath)
//重定向
const redirect = route.query.redirect
const handleLogin = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (!valid) return false
    //发送登录请求
    await store.login(toRaw(loginForm))
    //跳转首页
    router.push(`${ redirect || '/' }`)
  })
}
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #68b0fe; // 将输入框颜色改成蓝色
$cursor: #fff;
.login-container {
  width: 100%;
  height: 100%;
  background: url(../../assets/common/login.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  .el-form {
    width: 500px;
    height: 300px;
    .icon-user,
    .icon-password {
      margin-top: 20px;
      margin-right: 15px;
    }
    .el-input {
      width: 400px;
      height: 50px;
      margin-top: 20px;
      //background-color: red;
      .el-input__wrapper {
        //background-color: rgba(0, 0, 0, 0.3);
      }
    }
    .el-form-item__content {
      position: relative;
      .icon-eye,
      .icon-eye-open {
        position: absolute;
        top: 50%;
        right: 87px;
      }
    }
  }
}
</style>
